<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>welcome</title>
</head>

<body>
	welcome!
	<div id="chart_div" style="width: 900px; height: 500px;"></div>
	<div>
		<button id="data-trigger">try data</button>
		<div id="message-bar"></div>
	</div>
</body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
	google.load("visualization", "1", {
		packages : [ "corechart" ]
	});
	google.setOnLoadCallback(drawChart);
	function drawChart(srcData) {
		if (!$.isArray(srcData)) {
			srcData = [ [ 'Year', 'Sales', 'Expenses' ], [ '2004', 2000, 400 ],
					[ '2005', 2170, 460 ], [ '2006', 1660, 1120 ],
					[ '2007', 2030, 540 ] ];
		}
		var data = google.visualization.arrayToDataTable(srcData);

		var options = {
			title : 'Company Performance',
			hAxis : {
				title : 'Year',
				titleTextStyle : {
					color : 'red'
				}
			}
		};

		var chart = window.chart = new google.visualization.BarChart(document
				.getElementById('chart_div'));
		chart.draw(data, options);
	}

	$('#data-trigger').click(function(event) {
		event.preventDefault();
		event.stopPropagation();
		$.getJSON('/webmonitor/record/list', function(data) {
			$('#message-bar').text(data);
			drawChart(data);
		})
	});
</script>
</html>
